<template>
  <div>
    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item title="日期" ref="dateTime">
          <Popover
            :required="false"
            Type="date"
            label="日期"
            v-model="queryParams.Day"
            title=""
            :closeable="false"
          />
          <div class="pd10">
            <van-button type="primary" block round @click="getList(true)">
              确认
            </van-button>
          </div>
        </van-dropdown-item>

        <van-dropdown-item ref="teacher" title="教师/课程">
          <Popover
            :required="false"
            label="教师"
            category="用户列表"
            v-model="queryParams.Teacher"
            :query="{ Type: 2 }"
          />
          <Popover
            label="课程"
            :required="false"
            category="课程级联"
            Type="cascader"
            v-model="queryParams.Course"
          />
          <div class="pd10">
            <van-button type="primary" block round @click="getList(true)">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item
          v-model="queryParams.IsAnswer"
          :options="option3"
          @change="getList(true)"
        />
      </van-dropdown-menu>
    </van-sticky>
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      style="min-height: 100%"
    >
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        offset="300"
      >
        <div class="tableRow" v-for="item in tableList" @click="goDetail(item)">
          <div>
            <van-tag plain type="primary" size="medium">{{
              item.Name_Teacher
            }}</van-tag>
          </div>
          <div>{{ item.Name_Course }}</div>
          <div>{{ item.DateDay }} {{ item.StartAndEnd }}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup name="MyCourseWork">
import {
  GetAnswerAssignList_Page,
  AddAnswerAssign
} from '@/api/afterClass/index.js';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import useUserStore from '@/store/modules/user.js';
const userInfo = computed(() => useUserStore().userInfo);
const route = useRoute();
const router = useRouter();
const page = ref({
  PageIndex: 0,
  PageSize: 10
});
const Total = ref(0);
const tableList = ref([]);
const queryParams = ref({
  Day: '',
  Teacher: '',
  Course: '',
  IsAnswer: 0
});
const dateTime = ref({});
const teacher = ref({});
const show = ref(false);
const option3 = ref([
  { text: '全部答复', value: '' },
  { text: '未答复', value: 0 },
  { text: '已答复', value: 1 }
]);
const formData = ref({});
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const deviceInfo = ref({});

onMounted(() => {});

async function handleConfirm() {
  try {
    let query = {
      ...formData.value
    };
    await AddAnswerAssign(query);
  } catch (error) {
    console.log(error);
  }
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  tableList.value = [];
  page.value.PageIndex = 0;
  loading.value = true;
  onLoad();
};
const onLoad = () => {
  setTimeout(() => {
    if (refreshing.value) {
      tableList.value = [];
      refreshing.value = false;
    }
    page.value.PageIndex++;
    getList();
  }, 1000);
};

async function getList(bool = false) {
  if (bool) {
    teacher.value.toggle(false);
    dateTime.value.toggle(false);
    onRefresh();
    return;
  }
  try {
    let query = {
      ...page.value,
      ...queryParams.value,
      Student: userInfo.value.ID,
      NoPage: ''
    };
    let res = await GetAnswerAssignList_Page(query);
    res.data.List?.forEach(item => {
      item.DateDay = item.DateDay?.slice(0, 10);
      item.StartAndEnd =
        item.StartTime?.slice(11, 16) + ' -- ' + item.EndTime?.slice(11, 16);
    });
    tableList.value = [...tableList.value, ...res.data.List];
    //判断是否是校验
    loading.value = false;
    Total.value = res.data.Total;
    if (tableList.value?.length >= Total.value) {
      //将返回数据长度与总条数进行比较控制加载不加载的状态
      finished.value = true;
    }
  } catch (error) {
    console.log(error);
  }
}
function goDetail(item) {
  // formData.value = {
  //   ID_Assign: item.ID_Assign,
  // };
  // show.value = true;
  router.push({
    path: '/CourseManage/MyCourseWorkDetail',
    query: {
      ID: item.ID_Assign
    }
  });
}
onMounted(() => {
  // getList();
});
</script>

<style lang="scss" scoped>
.tableRow {
  display: flex;
  padding: 10rpx 20rpx 6rpx;
  background-color: rgb(252, 252, 252);
  border-bottom: 1px solid #eee;
  align-items: center;
  justify-content: space-between;
}
</style>
